<template>
	<view>
		<u-navbar title="技师详情" :autoBack="true" bgColor="transparent" :fixed="false"></u-navbar>
		<view class="" style="z-index: 1;">
			<u-swiper radius="0" height="400" :list="info.images" @change="e => currentNum = e.current"
				:autoplay="false" indicatorStyle="right: 20px" @click="viewImg">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ info.images.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="p-30 content">
			<view class="header flex-row align-center justify-between">
				<view class="title">
					{{info.name}}
				</view>
				<view class="flex-column align-end yu-color" v-if="info.check_state == 1">
					<image :src="authentication" style="width: 120rpx;height: 120rpx;" mode="widthFix"></image>
				</view>
			</view>
			<view class="small-size flex-row align-center">
				<u-avatar :src="info.avatar" size="30"></u-avatar>
				<!-- 	<view class="ml-10" style="color: #7B73FD;">
					{{info.name}}
				</view> -->
				<!-- 	<view class="ml-10 gray-color">
					注册于{{$u.timeFormat(info.createtime, 'yyyy年mm月dd日')}}
				</view> -->
			</view>
			<view class="mt-30 flex-row align-center justify-between tishi">
				<view class="left">
					新客必看
				</view>
				<view class="right">
					{{configData.tishi2}}
				</view>
				<!-- <image :src="tishi" style="width: 100%;" mode="widthFix"></image> -->
			</view>
			<view class="mt-30 flex-column justify-center info p-30" :style="'background: url('+ bg11 +') no-repeat;background-size: 100% 100%;'"
				v-if="info.is_clock == 1">
				<view class="flex-row align-center justify-between">
					<view class="flex-row align-center">
						<image :src="map" style="width: 35rpx;height: 35rpx;" mode="widthFix">
						</image>
						<view class="ml-10 small-size gray-color">
							{{info.address ? info.address : '********'}}
						</view>
					</view>
					<!-- <view class="small-size gray-color">一键导航</view> -->
				</view>
				<view class="flex-row align-center justify-between mt-30">
					<view class="flex-row align-center ">
						<image :src="mobile" style="width: 35rpx;height: 35rpx;" mode="widthFix">
						</image>
						<view class="ml-10 small-size gray-color">
							{{info.mobile ? info.mobile : '********'}}
						</view>
					</view>
					<view class="size gray-color" @click="call(info.mobile)" v-if="info.mobile">一键拨打</view>
				</view>
			</view>
			<view class="mt-30 info fw-700 sub-size flex-row align-center justify-center"
				:style="'background: url('+ bg11 +') no-repeat;background-size: 100% 100%;color:#9A550E'" v-else>
				解锁后可查看详细地址和联系方式
				<!-- <image :src="imgData.clock" style="width: 100%;height: 100rpx;" mode="widthFix"></image> -->
			</view>
			<view class="mt-30">
				<view class="">
					<!-- <u-tabs :list="list4" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`"
						:activeStyle="{
					        color: '#303133',
					        fontWeight: 'bold',
					        transform: 'scale(1.05)'
					    }" :inactiveStyle="{
					        color: '#606266',
					        transform: 'scale(1)'
					    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
					</u-tabs> -->
					<view class="mt-30">
						<view class="">
							<view class="detail-title">
								技师信息
							</view>
						</view>
						<view class="mt-30">
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									年龄:
								</view>
								<view class="">
									{{info.age ? info.age : '***'}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									身高:
								</view>
								<view class="">
									{{info.height ? info.height : '秘密'}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									体重:
								</view>
								<view class="">
									{{info.weight ? info.weight : '秘密'}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									身材:
								</view>
								<view class="">
									{{info.figure ? info.figure : '秘密'}}
								</view>
							</view>
							<view class="flex-row align-center small-size gray-color mt-10">
								<view class="label">
									照片相似度:
								</view>
								<view class="flex-row align-center">
									<u-rate readonly :count="count" v-model="info.value"
										activeColor="#FF8D57"></u-rate>{{info.value}}
								</view>
							</view>
						</view>
					</view>
					<view class="mt-30">
						<view class="">
							<view class="detail-title">
								擅长项目
							</view>
						</view>
						<view class="mt-30 gray-color small-size">
							<view class="tag">
								<view class="tag-item" v-for="(item,index) in info.service_text">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="mt-30">
						<view class="">
							<view class="detail-title">
								主推项目
							</view>
						</view>
						<view class="mt-30 gray-color small-size">
							<view class="tag">
								<view class="tag-item" v-for="(item,index) in info.service1_text">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="mt-30">
						<view class="">
							<view class="detail-title">
								上班时间
							</view>
						</view>
						<view class="mt-30 gray-color small-size">
							上班时间：{{info.starttime}}-{{info.endtime}}
						</view>
					</view>
					<view class="mt-30">
						<view class="">
							<view class="detail-title">
								自我评价
							</view>
						</view>
						<view class="mt-30 gray-color small-size">
							<u-parse :content="info.content"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="submit">
			<template v-if="info.is_clock != 0">
				<u-button @click="popupShow = true;gift_id = 0" :loading="loading" color="#FFF1D8" :icon="gift"
					:iconColor="$u.color.color" shape="circle" text="礼物" :customStyle="{'color':'#B75414'}"></u-button>
			</template>
			<template v-else>
				<u-button @click="popupShow = true;gift_id = 0" :loading="loading" color="#FFF1D8" :icon="gift"
					:iconColor="$u.color.color" shape="circle" text="礼物"
					:customStyle="{'width':'48%','color':'#B75414'}"></u-button>
				<u-button @click="getMobile" :color="$u.color.btnColor" :loading="loading" shape="circle" text="获取联系方式"
					:customStyle="{'width':'48%','color':'#FFD8B5'}"></u-button>
			</template>
		</view>

		<u-popup :show="popupShow" @close="close" @open="open" round="10" closeable>
			<view class="popupConent p-30">
				<view class="title text-center">
					赠送礼物
				</view>

				<view class="card mt-30 small-size" style="min-height: 200rpx;">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(item,index) in giftData" :key="index" @click="click">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.image" :size="32"></u-icon>
							<view class="grid-text" :class="{'color1' : item.id == gift_id}">{{item.name}}</view>
							<view class="grid-text" :class="{'color1' : item.id == gift_id}">{{item.price}}</view>
						</u-grid-item>
					</u-grid>
				</view>

				<view class="flex-row justify-end mt-30">
					<view class="">
						<u-button @click="send" :color="$u.color.btnColor" :loading="loading" shape="circle" text="赠送"
							:customStyle="{'width':'150rpx','height':'50rpx'}"></u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
		<page-tabbar :value="0" />
	</view>
</template>

<script>
	import {
		staffDetail,
		sendGift,
		staffClock
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				loading: false,
				popupShow: false,
				count: 5,
				value: 5,
				list4: [{
					name: '基本信息'
				}],
				currentNum: 0,
				list1: [],

				gift_id: 0,
				id: 0,
				info: {
					images: []
				}
			}
		},
		computed: {
			...mapState(['giftData']),
		},
		onLoad(e) {
			if (e.id) this.id = e.id

			this.getInfo();
		},
		methods: {
			call(phoneNumber) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			},
			viewImg(index) {
				console.log('index', index);
				uni.previewImage({
					current: index,
					urls: this.info.images,
				});
			},
			getMobile() {
				let vm = this;
				uni.showModal({
					title: '解锁手机号',
					content: `需要支付${this.info.price}元宝`,
					showCancel: true,
					success(e) {
						console.log(e);
						if (e.confirm) {
							vm.loading = true;
							staffClock({
								data: {
									staff_id: vm.id
								}
							}).then(res => {
								console.log(res);
								vm.$refs.uToast.show({
									type: 'success',
									message: '解锁成功',
									complete() {
										vm.loading = false;
										vm.getInfo()
									}
								})
							}).catch(err => {
								vm.loading = false;
							})
						}
					}
				})
			},
			click(e) {
				console.log(e);
				this.gift_id = this.giftData[e].id
			},
			getInfo() {
				staffDetail({
					data: {
						id: this.id
					}
				}).then(res => {
					console.log('res', res);
					this.info = res
				})
			},
			open() {
				console.log('open');
			},
			close() {
				this.popupShow = false
				// console.log('close');
			},
			send() {
				let vm = this;
				if (this.gift_id == 0) {
					this.$u.toast('请选择礼物');
					return false;
				}
				sendGift({
					data: {
						to_user_id: this.info.user_id,
						gift_id: this.gift_id
					}
				}).then(res => {
					console.log('res', res);
					this.popupShow = false;
					vm.$refs.uToast.show({
						type: 'success',
						message: '赠送成功',
						complete() {
							vm.loading = false;
							vm.getInfo();
						}
					})

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		margin-top: 30rpx;

		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.nav {
		margin: 30rpx 0;
		color: #FFD8B5;
	}

	.detail-title {
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.detail-title::before {
		content: '';
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 20rpx;
		height: 20rpx;
		background: url($titleBg) no-repeat;
		margin-right: 10rpx;
	}

	.content {
		margin-top: -10rpx;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		min-height: 1000rpx;
		padding-bottom: 120rpx;
		z-index: 9;
		position: relative;
		background-color: #fff;
		padding-bottom: 180rpx;
	}

	.tag {
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		margin-top: 30rpx;

		&-item {
			border: 1rpx solid #E6E6E6;
			padding: 10rpx 20rpx;
			margin-left: 10rpx;
			color: #575859;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		&-item:first-child {
			margin: 0;
		}
	}

	.active {
		color: #A11A0E;
		border-color: #A11A0E;
		background-color: transparent;
	}

	.info {
		background-size: 100% 100%;
		width: 100%;
		min-height: 150rpx;
		// padding: 30rpx;
		box-sizing: border-box
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 20rpx;
			width: 20rpx;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 10rpx 15rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 30px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.label {
		width: 200rpx;
	}

	.popupConent {
		min-height: 400rpx;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 99;
		display: flex;
		flex-direction: row;
	}

	.color1 {
		color: #FFD8B5;
	}
	
	.tishi {
		background-color: #FEF1DE;
		color: #9A550E;
		border-radius: 10rpx;
	}
	
	.left {
		width: 15%;
		background-color: #AB1F15;
		color: #fff;
		border-radius: 10rpx;
		padding: 15rpx;
		font-size: 42rpx;
		font-weight: 700;
		text-align: center;
	}
	
	.right {
		width: 85%;
		padding: 10rpx;
		font-size: 24rpx;
		text-align: center;
	}
</style>